<template>
	<view>
		<view class="flex-shrink" style="height:55px;"></view>
		<view class="fixed-bottom flex shadow" style="height: 55px;" :style="{backgroundColor: tabBar.backgroundColor}">
			<view @click="handleTabs(item,index)" class="w-100 flex flex-column align-center justify-center"
				v-for="(item,index) in tabBar.Chidren.list" :key="index">
				<view style="width: 30px;height: 30px;" class="position-relative">
					<i v-if="item.text=='购物车' && shopNum>0" class="position-absolute bg-danger rounded-circle text-white px-1"
						style="top: -2.5px; left: -2.5px; font-size: 12px;">{{ shopNum }}</i>
					<image v-if="BASE_ICON" :src="tabId==index? BASE_ICON + item.selectedIcon : BASE_ICON + item.icon"
						class="w-100" style="height: 100%;" mode="scaleToFill"></image>
				</view>
				<text style="font-size: 12px;" :style="{color:tabId==index ?tabBar.selectedColor:tabBar.color}">{{item.text}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	import {mapState,mapMutations} from 'vuex';
	export default {
		data() {
			return {
				total:0,
				tabBar: {
					selectedColor: '#dc3545',
					color:'#000',
					backgroundColor: '#fff',
					Chidren: {
						list: [{
							url: '/P00000000000027.html',
							type: 'web',
							text: '首页',
							icon: 'index-0.png',
							selectedIcon: 'index-1.png',
						}, {
							url: '/pages/index/classify',
							type: 'wx',
							text: '分类',
							icon: 'classify-0.png',
							selectedIcon: 'classify-1.png',
						}, {
							url: '/pages/index/shopCart',
							type: 'wx',
							text: '购物车',
							icon: 'shop-0.png',
							selectedIcon: 'shop-1.png',
						}, {
							url: '/P00000000000028.html',
							type: 'web',
							text: '我的',
							icon: 'my-0.png',
							selectedIcon: 'my-1.png',
						}]
					}
				},
			}
		},
		props: {
			tabId: { //总计金额
				type: Number,
				default: 0
			},
		},
		computed: {
			...mapState(['Open_ID', 'App_ID', 'BASE_ICON','shopNum']),
		},
		methods: {
			...mapMutations(['setBASEPath','setBASEQuery']),
			handleTabs(item,index) { //跳转
				if (this.tabId != index && item.url) {
					if(item.type == 'web'){
						this.setBASEPath(item.url);//跳转路径
						this.setBASEQuery({});//传参
						uni.redirectTo({
							url:'/pages/index/index',
						})
					} else if (item.type == 'wx') {
						uni.redirectTo({
							url:item.url,
						})
					}
				}
			},
		}
	}
</script>

<style>

</style>